<script setup lang="ts">
import { getSingerSongs, getSongDetail } from '@/api/singer'
import useDetailCom from '@/common/use-detail-com'
import MusicList from '@/components/music-list/index.vue'
import { getSongUrl } from '@/api/common'
import { processSongPic, processSongUrl } from '@/utils'
const route = useRoute()
interface IProps {
  title: string
  pic: string
}
const props = withDefaults(defineProps<IProps>(), {
  title: '',
  pic: ''
})
const requestParam: {
  more: boolean
  limit: number
  offset: number
} = reactive({
  more: false,
  limit: 100,
  offset: 1
})
const { songList, loading } = useDetailCom(getSingerSongs, true, requestParam)
async function requestMoreData() {
  if (!requestParam.more) {
    return
  }
  requestParam.offset++
  const { songs, more } = await getSingerSongs(
    Number(route.params.id),
    requestParam.offset,
    requestParam.limit
  )
  requestParam.more = more
  const ids = songs.map(({ id }) => id)
  const { data: urls } = await getSongUrl(ids)
  // 根据歌曲id获取到对应的url播放地址
  processSongUrl(songs, urls)
  const { songs: data } = await getSongDetail(ids)
  processSongPic(songs, data)
  songList.value = [...songList.value, ...songs]
}
async function refreshRequest() {
  requestParam.more = false
  requestParam.limit = 100
  requestParam.offset = 1
  songList.value = []
  loading.value = true
  const { songs, more } = await getSingerSongs(
    Number(route.params.id),
    requestParam.offset,
    requestParam.limit
  )
  requestParam.more = more
  const ids = songs.map(({ id }) => id)
  const { data: urls } = await getSongUrl(ids)
  // 根据歌曲id获取到对应的url播放地址
  processSongUrl(songs, urls)
  const { songs: data } = await getSongDetail(ids)
  processSongPic(songs, data)
  loading.value = false
  songList.value = songs
}
</script>

<template>
  <div class="singer-detail">
    <music-list
      :song-list="songList"
      :title="props.title"
      :pic="props.pic"
      :loading="loading"
      :request="requestMoreData"
      :more="requestParam.more"
      :pull-up-load="true"
      :refresh-request="refreshRequest"
    />
  </div>
</template>

<style scoped lang="scss">
.singer-detail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 120;
  background-color: $color-background;
}
</style>
